<template>
  <div v-loading="loading" :class="className" :style="{ height: height, width: width }" />
</template>

<script>
import * as echarts from 'echarts'
require('echarts/theme/macarons')
import resize from './mixins/resize'

export default {
  mixins: [resize],
  props: {
    className: {
      type: String,
      default: 'dealState'
    },
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '100%'
    },
    autoResize: {
      type: Boolean,
      default: true
    },
    chartData: {
      type: Array,
      required: true
    }
  },
  data() {
    return {
      chart: null,
      loading: false,
      optionData: [
        // { value: 890, count: 890, name: '北京' },
        // { value: 773, count: 773, name: '上海' },
        // { value: 576, count: 576, name: '广州' },
        // { value: 430, count: 430, name: '深圳' },
        // { value: 300, count: 300, name: '河南' },
        // { value: 256, count: 256, name: '江苏' }
      ]
    }
  },
  watch: {
    chartData: {
      handler() {
        this.initChart()
      },
      deep: true,
      immediate: true
    }
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
  mounted() {
    this.initChart()
  },
  methods: {
    initChart() {
      if (this.chartData.length > 0) {
        this.optionData = this.chartData.map((item) => {
          return {
            name: this.$t(item.nodeName),
            value: item.sort,
            count: item.count,
            nodeId: item.nodeId
          }
        })
      }

      var datas = this.optionData.map((item, index) => {
          if (index % 2 === 0) {
              item['label'] = {
                  position: 'right'
              }
          } else {
              item['label'] = {
                  position: 'left'
              }
          }
          return item
      })

      this.chart = echarts.init(this.$el, '', { renderer: 'canvas', useDirtyRect: false })
      this.chart.on('click', this.clickDealState)
      this.chart.setOption({
        color: ['#41E5E4', '#3DBCDD', '#378BCB', '#375FC0', '#069641', '#FC8A15'],
        calculable: true,
        series: [{
            name: ' ',
            type: 'funnel',
            left: 'center',
            right: 'center',
            width: '50%',
            top: '30%',
            bottom: '10%',
            orient: 'vertical',
            itemStyle: {
              borderWidth: 0
            },
            label: {
              normal: {
                formatter: function(params) {
                    return `{aa|${params.name}}\n{bb|${params.data.count}}`
                },
                rich: {
                    aa: {
                        height: 20,
                        align: 'left',
                        fontSize: 12,
                        color: '#55e0ff'
                    },
                    bb: {
                        height: 20,
                        align: 'left',
                        fontSize: 11,
                        color: '#ffffff'
                    }
                }
              }
            },
            labelLine: {
              length: 30,
              lineStyle: {
                  width: 1,
                  type: 'solid',
                  color: '#ffffff'
              }
            },
            data: datas
        }]
      })
    },
    clickDealState(param) {
      const data = {
        nodeId: param.data.nodeId, // 当前下拉框选中的类型
        name: param.data.name // 当前下拉框选中的类型名称
      }
      this.$emit('clickDealState', data)
    }
  }
}
</script>
